<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<!--xmlns作用：不报红，添加提示。不加也可正常运行-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function () {
            //验证token
            var getData = localStorage.getItem("Authorization");
            //用户名
            var user = "";
            //权限加载，此处调用方法进行内容加载

            if (getData != null) {
                security()
            }
            var UserName = localStorage.getItem("UserName");
            if (UserName != null) {
                user += "<a> 用户名：<span >" + UserName + "</span> </a>"
                user += "<a th:href='@{/logout}'>注销 </a>";
                $("#username").html(user)
            }

        })

        function security() {
            var getData = localStorage.getItem("Authorization");
            $.ajax({
                url: "/lo/loss",
                dataType: 'text',
                headers: {
                    Accept: "application/json; charset=utf-8",
                    Authorization: "" + getData  //这是获取的token
                },
                success: function (data) {
                    var c = "";
                    c += "<a>已经登录</a>";
                    $("#vc").html(c)
                },
                error: function (data) {
                    alert("error" + data);
                }
            });
        }

        //权限验证
        function role() {
            var getData = localStorage.getItem("Authorization");
            $.ajax({
                url: "/lo/los",
                contentType: "application/json",
                dataType: 'text',
                headers: {
                    Accept: "application/json; charset=utf-8",
                    Authorization: "" + getData  //这是获取的token
                },
                success: function (data) {
                    var c = "";
                    c += "<a>toke</a>";
                    $("#vc").html(c)
                },
                error: function (data, msg, p) {
                    console.log("data" + p);
                }
            });
        }

        //用户验证
        function us() {
            var getData = localStorage.getItem("Authorization");
            $.ajax({
                url: "/operate/allot",
                contentType: "application/json",
                dataType: 'text',
                headers: {
                    Accept: "application/json; charset=utf-8",
                    Authorization: "" + getData  //这是获取的token
                }
            });
        }
    </script>
</head>

<body>
index
<input type="button" onclick="role()" value="权限验证"/>
<input type="button" onclick="us()" value="用户验证"/>
<div id="vc"></div>
<!--未登录显示-->
<div id="username">
    <a th:href="@{/tologin}">登录</a>
</div>

<!--登录显示-->
<div sec:authorize="isAuthenticated()">
    <a>
        用户名：<span sec:authentication="name"></span>
    </a>

</div>
<!--菜单动态实现-->
<div sec:authorize="hasRole('ROLE_v')">
    <table>
        <th>
        <td><a th:href="@{/lenve1/1}">lenve1/lenve1</a></td>
        <td><a th:href="@{/lenve1/2}">lenve1/lenve2</a></td>
        <td><a th:href="@{/lenve1/3}">lenve1/lenve3</a></td>
        </th>
    </table>
</div>


<div sec:authorize="hasRole('vip2')">
    <table>
        <th>
        <td><a th:href="@{/lenve2/1}">lenve2/lenve1</a></td>
        <td><a th:href="@{/lenve2/2}">lenve2/lenve2</a></td>
        <td><a th:href="@{/lenve2/3}">lenve2/lenve3</a></td>
        </th>
    </table>
</div>


<!--
<sec:authorize ifNotGranted roles="ROLE_vip1">

    <a href="user.jsp">djshfjskh</a>

</sec:authorize>
-->

</body>
</html>